<template>

	<view style="min-height: 800px;">

		<!-- 止盈止损 弹窗 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar justify-end">
					<view class="content">
						<text class="text-bold">{{order.gname}}</text>
						<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>

						{{order.rise_fall=='1' ? i18n.contract.type1 : i18n.contract.type2}}{{zytype==1 ? i18n.contract.bt1 : i18n.contract.bt2}}
					</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view style="margin-bottom: 17%;padding: 0px 20px;">
					<view class="cu-bar ">
						<view class=" nav " style="margin: 0 auto;">
							<view class="cu-item" :class="1==type?'text-black cur':''" @tap="type=1" style="margin: 0px 60px;">
								{{i18n.contract.nowprice}}
							</view>
							<view class="cu-item" :class="2==type?'text-black cur':''" @tap="type=2" style="margin: 0px 60px;">
								{{i18n.contract.methodname4}}
							</view>
						</view>
					</view>
					<view class="uni-flex uni-row margin-top">
						<view class="text" style="width:50%;padding-right: 5px;text-align: left;">
							<view class="chosetype">
								{{i18n.contract.price2}}
								<text style="margin-left: 5px;">{{order.price}}</text>
							</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1; text-align: right;">
							<view class="chosetype">
								{{i18n.contract.newprice}}
								<text style="margin-left: 5px;">{{order.newprice}}</text>
							</view>
						</view>
					</view>
					<view class="flex text-center margin-top-sm margin-bottom-sm" v-if="zytype==1">
						<view class="flex-sub padding" @tap="downstop_profit_price"> - </view>
						<view class="flex-treble padding">
							<input type="number" v-model="stopfrom.stop_profit_price" :placeholder="i18n.contract.Stop_profit_price2 + '(USDT)'" />
						</view>
						<view class="flex-sub padding" @tap="upstop_profit_price"> + </view>
					</view>
					<view class="flex text-center margin-top-sm margin-bottom-sm" v-if="zytype==2">
						<view class="flex-sub padding" @tap="downstop_loss_price"> - </view>
						<view class="flex-treble padding">
							<input type="number" v-model="stopfrom.stop_loss_price" :placeholder="i18n.contract.Stop_loss_price2 + '(USDT)'" />
						</view>
						<view class="flex-sub padding" @tap="upstop_loss_price"> + </view>
					</view>
					<!-- <view class="flex text-center margin-bottom-sm">
						<view class="flex-sub padding" @tap="downstopnum"> - </view>
						<view class="flex-treble padding">
							<input type="number" v-model="stopfrom.sell_hand2" :placeholder="i18n.contract.hand" />
						</view>
						<view class="flex-sub padding" @tap="upstopnum"> + </view>
					</view> -->
					<view class="uni-flex uni-row margin-top">
						<view class="text" style="width:50%;padding-right: 5px;text-align: left;">
							<view class="chosetype">
								{{i18n.contract.keping}}
								<text style="margin-left: 5px;">{{order.hand}}</text>{{i18n.contract.unit}}
							</view>
						</view>
						<view class="text" style="-webkit-flex: 1;flex: 1; text-align: right;">
							<view class="chosetype">
								=
								<text style="margin-left: 5px;">{{order.hand*order.bo}}</text>{{order.gname}}
							</view>
						</view>
					</view>
					<view>
						<view class="text">
							{{i18n.contract.info}}
						</view>
					</view>
					<view class="flex margin-top-sm">
						<view class="flex-sub ">
							<button class="cu-btn round " @tap="hideModal">{{i18n.contract.bt5}}</button>
						</view>
						<view class="flex-sub ">
							<button class="cu-btn round bg-yellow" @tap="stopsend(order)">{{i18n.contract.bt6}}</button>
						</view>

					</view>

				</view>
			</view>
		</view>
		<!-- 止盈止损 弹窗 -->

		<scroll-view id="nav-bar" scroll-x class="nav margin-top">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :id="'tab'+index" v-for="(item,index) in tabBars" :key="item.id" :class="index==tabCurrentIndex?'text-yellow cur':''"
				 @tap="changeTab(index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<!-- 下拉刷新组件 -->
		<!-- <mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh"
		 @setEnableScroll="setEnableScroll"> -->
		<!-- 内容部分 -->
		<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
			<swiper-item v-for="tabItem in tabBars" :key="tabItem.id">
				<scroll-view class="panel-scroll-box" scroll-y="true" @scrolltolower="loadMore">
					<!-- 列表 -->
					<template v-for="(item, index) in tabItem.newsList">

						<view class="flex margin-xs radius bg-white margin-top" v-if="tabCurrentIndex==3">
							<!-- 历史平仓费 -->
							<view class="flex-twice   padding-sm radius ">
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:41%;padding-right: 5px;">
										<text class="text-bold">{{item.gname.toUpperCase()}}</text>
										<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>
										<!-- <text>{{item.product_id}}{{i18n.contract.xu}} </text> -->
									</view>
									<view style="padding-right: 5px;">
										<button class="cu-tag " :class="item.rise_fall == '1' ? ' bg-yellow' : ' bg-red'">{{item.rise_fall == '1' ? i18n.contract.type3 : i18n.contract.type4}}{{item.shou}}X</button>
									</view>

									<!-- 平仓 -->
									<view style="-webkit-flex: 1;flex: 1;">
										<button class="cu-tag bg-red">{{i18n.contract.bt3}} </button>
										<text class="cuIcon-share text-yellow" style="float: right;" @tap="sharepic(item,item.tete3)"></text>
									</view>
								</view>
								<!-- 	<view class="uni-flex uni-row margin-top-sm">
							<view style="width:18%;padding-right: 5px;">
								<text class="uni-h7">{{i18n.contract.addtime}}</text>
							</view>
							<view style="-webkit-flex: 1;flex: 1;text-align: right;">
								<text class="uni-h7">{{item.addtime_text}}</text>
							</view>
						</view> -->
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:18%;padding-right: 5px;">
										<text class="uni-h7">{{i18n.contract.pingtime}}</text>
									</view>
									<view style="-webkit-flex: 1;flex: 1;text-align: right;">
										<text class="uni-h7">{{item.pingtime_text}}</text>
									</view>
								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub  ">
										<view class="toptext">
											<view class="text-gray">{{i18n.contract.item1}}</view>
											<text>0/{{item.hand}}</text>
										</view>
									</view>
									<view class="flex-sub">
										<view class="toptext" style="text-align: center;">
											<view class="text-gray">{{i18n.contract.price2}}</view>
											<text>{{item.price}}</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: right;">
											<view class="text-gray">{{i18n.contract.Sell_price}}</view>
											<text>{{item.sell_price}}</text>
										</view>
									</view>

								</view>

								<view class="flex margin-top-sm">

									<view class="flex-sub ">
										<view class="toptext  ">
											<view class="text-gray">{{i18n.contract.Profit}}(USDT)</view>
											<text :class="item.tete3 >=0 ? ' uni-up' : ' uni-down' ">{{item.profit > 0 ? "+" : ""}}{{item.profit}} ({{item.tete3}}%)</text>
										</view>
									</view>

									<view class="flex-sub ">
										<view class="toptext  " style="text-align: center;">
											<view class="text-gray">{{i18n.contract.fee}}</view>
											<text>{{item.fee2}}</text>
										</view>
									</view>
									<view class="flex-sub  ">
										<view class="toptext  " style="text-align: right;">

											<view class="text-gray">{{i18n.contract.Deposit}}</view>
											<text>{{item.deposit}}</text>
										</view>
									</view>

								</view>

							</view>
						</view>

						<view class="flex margin-xs radius bg-white margin-top">
							<!-- 持仓 -->
							<view class="flex-twice   padding-sm radius " v-if="tabCurrentIndex == 0">
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:41%;padding-right: 5px;">
										<!-- <text>{{item.product_id}}{{i18n.contract.xu}} </text> -->
										<text class="text-bold">{{item.gname.toUpperCase()}}</text>
										<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>
									</view>
									<view style="padding-right: 5px;">
										<button class="cu-tag " :class="item.rise_fall == '1' ? ' bg-yellow' : ' bg-red'">{{item.rise_fall == '1' ? i18n.contract.type3 : i18n.contract.type4}}{{item.shou}}X</button>
									</view>

									<view style="-webkit-flex: 1;flex: 1;">
										<text class="cuIcon-share text-yellow" style="float: right;" @tap="sharepic(item,item.tete2)"></text>
									</view>
								</view>
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:18%;padding-right: 5px;">
										<text class="uni-h7">{{i18n.contract.addtime}}</text>
									</view>
									<view style="-webkit-flex: 1;flex: 1;text-align: right;">
										<text class="uni-h7">{{item.addtime_text}}</text>
									</view>
								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub  " v-if="item.order_state=='1'">
										<view class="toptext">
											<view class="text-gray">{{i18n.contract.item1}}</view>
											<text>{{item.hand-item.sell_hand}}/{{item.hand}}</text>
										</view>
									</view>
									<view class="flex-sub">
										<view class="toptext" style="text-align: center;">
											<view class="text-gray">{{i18n.contract.price2}}</view>
											<text>{{item.price}}</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: right;">
											<view class="text-gray">{{i18n.contract.item2}}</view>
											<text>{{item.sysprice}}</text>
										</view>
									</view>
								</view>

								<view class="flex margin-top-sm">

									<view class="flex-sub ">
										<view class="toptext  ">
											<view class="text-gray">{{i18n.contract.item3}}(USDT)</view>
											<text :class="item.tete >=0 ? ' uni-up' : ' uni-down' ">{{item.tete > 0 ? "+" : ""}}{{item.tete}} ({{item.tete2}}%)</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: center;">
											<view class="text-gray">{{i18n.contract.fee}}</view>
											<text>{{item.fee}}</text>
										</view>
									</view>
									<view class="flex-sub  ">
										<view class="toptext  " style="text-align: right;">

											<view class="text-gray">{{i18n.contract.Deposit}}</view>
											<text>{{item.deposit}}</text>
										</view>
									</view>

								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub padding-sm">
										<button class="cu-btn round bg-yellow" @tap="hand(item,1)">{{i18n.contract.bt1}}</button>
									</view>
									<view class="flex-sub padding-sm">
										<button class="cu-btn round bg-yellow" @tap="hand(item,2)">{{i18n.contract.bt2}}</button>
									</view>
									<!-- <view class="flex-sub ">
									<button class="cu-btn round line-gray" @tap="tip()">反向开仓</button>
								</view> -->
									<view class="flex-sub padding-sm">
										<button class="cu-btn round bg-yellow" @tap="unwind(item)">{{i18n.contract.bt3}}</button>
									</view>
								</view>
							</view>
							<!-- 持仓 end -->

							<!-- 委托 -->
							<view class="flex-twice   padding-sm radius " v-if="tabCurrentIndex ==1">
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:41%;padding-right: 5px;">
										<!-- <text>{{item.product_id}}{{i18n.contract.xu}} </text> -->
										<text class="text-bold">{{item.gname.toUpperCase()}}</text>
										<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>
									</view>
									<view style="padding-right: 5px;">
										<button class="cu-tag " :class="item.rise_fall == '1' ? ' bg-yellow' : ' bg-red'">{{item.rise_fall == '1' ? i18n.contract.type3 : i18n.contract.type4}}{{item.shou}}X</button>
									</view>

									<view style="-webkit-flex: 1;flex: 1;">
										<!-- 委托单取消 -->
										<button class="cu-btn line-yellow sm" @tap="cancle(item)" style="float: right;margin-right: 5px;" v-if="item.order_state=='4'">{{i18n.contract.bt5}}</button>

									</view>
								</view>
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:18%;padding-right: 5px;">
										<text class="uni-h7">{{i18n.contract.addtime}}</text>
									</view>
									<view style="-webkit-flex: 1;flex: 1;text-align: right;">
										<text class="uni-h7">{{item.addtime_text}}</text>
									</view>
								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub  ">
										<view class="toptext">
											<view class="text-gray">{{i18n.contract.item1}}</view>
											<text>0/{{item.hand}}</text>
										</view>
									</view>
									<view class="flex-sub">
										<view class="toptext" style="text-align: center;">
											<view class="text-gray">{{i18n.contract.price2}}</view>
											<text>{{item.price}}</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: right;">
											<view class="text-gray">{{i18n.contract.item2}}</view>
											<text>0</text>
										</view>
									</view>

								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub ">
										<view class="toptext  ">
											<view class="text-gray">{{i18n.contract.item3}}(USDT)</view>
											<text :class="item.tete >=0 ? ' uni-up' : ' uni-down' ">0</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: center;">
											<view class="text-gray">{{i18n.contract.fee}}</view>
											<text>{{item.fee}}</text>
										</view>
									</view>
									<view class="flex-sub  ">
										<view class="toptext  " style="text-align: right;">

											<view class="text-gray">{{i18n.contract.Deposit}}</view>
											<text>{{item.deposit}}</text>
										</view>
									</view>
								</view>

							</view>
							<!-- 委托 end -->
							<!-- 止盈止损 -->
							<view class="flex-twice   padding-sm radius " v-if="tabCurrentIndex == 2">
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:41%;padding-right: 5px;">
										<!-- <text>{{item.product_id}}{{i18n.contract.xu}} </text> -->
										<text class="text-bold">{{item.gname.toUpperCase()}}</text>
										<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>
									</view>
									<view style="width:30%;padding-right: 5px;">
										<button class="cu-tag " :class="item.rise_fall == '2' ? ' bg-yellow' : ' bg-red'">{{item.rise_fall == '1' ? i18n.contract.pingduo : i18n.contract.pingkong}}
										</button>
										<button class="cu-tag bg-yellow">{{item.is_bu == '2' ? i18n.contract.bt2 : i18n.contract.bt1}} </button>
									</view>

									<view style="-webkit-flex: 1;flex: 1;">
										<!-- 止盈止损修改 -->
										<button class="cu-btn line-yellow sm" @tap="hand(item,item.is_bu)" style="float: right;margin-right: 5px;">{{i18n.contract.bt4}}</button>
										<!-- 止盈止损取消 -->
										<button class="cu-btn line-yellow sm" @tap="cancle2(item,item.is_bu)" style="float: right;margin-right: 5px;">{{i18n.contract.bt5}}</button>
										<!-- 委托单取消 -->
										<!-- <button class="cu-btn line-yellow" @tap="cancle(item)" style="float: right;margin-right: 5px;" v-if="item.order_state=='4'">取消</button> -->

									</view>
								</view>
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:18%;padding-right: 5px;">
										<text class="uni-h7">{{i18n.contract.addtime}}</text>
									</view>
									<view style="-webkit-flex: 1;flex: 1;text-align: right;">
										<text class="uni-h7">{{item.addtime_text}}</text>
									</view>
								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub ">
										<view class="toptext">
											<view class="text-gray">{{i18n.contract.item4}}</view>
											<text v-if="item.is_bu=='1'">{{i18n.contract.newprice}}{{item.rise_fall=='1' ? '≥' : '≤'}}{{item.stop_profit_price}}</text>
											<text v-if="item.is_bu=='2'">{{i18n.contract.newprice}}{{item.rise_fall=='1' ? '≤' : '≥'}}{{item.stop_loss_price}}</text>
										</view>
									</view>
									<view class="flex-sub">
										<view class="toptext" style="text-align: center;">
											<view class="text-gray">{{i18n.contract.item5}}</view>

											<text v-if="item.is_bu=='1'">{{item.stop_profit_price}}</text>
											<text v-if="item.is_bu=='2'">{{item.stop_loss_price}}</text>
										</view>
									</view>
									<view class="flex-sub">
										<view class="toptext" style="text-align: right;">
											<view class="text-gray">{{i18n.contract.item6}}</view>
											<text>{{item.sell_hand2}}/{{item.hand}}</text>
										</view>
									</view>

								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub ">
										<view class="toptext  ">
											<view class="text-gray">{{i18n.contract.method}}</view>
											<text>{{i18n.contract.stop1}}</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: center;">
											<view class="text-gray">{{i18n.contract.state}}</view>
											<text>{{i18n.contract.state1}}</text>
										</view>
									</view>
									<!-- <view class="flex-sub  ">
									<view class="toptext  " style="text-align: right;">
										<view class="text-gray">设置时间</view>
										<text>1212</text>
									</view>
								</view> -->
									<view class="flex-sub ">
										<view class="toptext " style="text-align: right;">
											<view class="text-gray">{{i18n.contract.pingtime2}}</view>
											<text v-if="item.pingtime==0">--</text>
											<text class="uni-h7" v-if="item.pingtime>0">{{item.pingtime_text}}</text>
										</view>
									</view>
								</view>
							</view>
							<!-- 止盈止损 end -->
							<!-- 历史开仓  -->
							 <view class="flex-twice   padding-sm radius " v-if="tabCurrentIndex==3">
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:41%;padding-right: 5px;">
										<text>{{item.product_id}}{{i18n.contract.xu}} </text>
									</view>
									<view style="padding-right: 5px;">
										<button class="cu-tag " :class="item.rise_fall == '1' ? ' bg-yellow' : ' bg-red'">{{item.rise_fall == '1' ? i18n.contract.type3 : i18n.contract.type4}}{{item.shou}}X</button>

									</view> 
									<view style="-webkit-flex: 1;flex: 1;">
										<button class="cu-tag bg-yellow">{{i18n.contract.bt7}} </button>
									</view>
								</view>
								<view class="uni-flex uni-row margin-top-sm">
									<view style="width:18%;padding-right: 5px;">
										<text class="uni-h7">{{i18n.contract.addtime}}</text>
									</view>
									<view style="-webkit-flex: 1;flex: 1;text-align: right;">
										<text class="uni-h7">{{item.addtime_text}}</text>
									</view>
								</view>

								<view class="flex margin-top-sm">
									<view class="flex-sub  ">
										<view class="toptext">
											<view class="text-gray">{{i18n.contract.item1}}</view>
											<text>0/{{item.hand}}</text>
										</view>
									</view>
									<view class="flex-sub">
										<view class="toptext" style="text-align: center;">
											<view class="text-gray">{{i18n.contract.price2}}</view>
											<text>{{item.price}}</text>
										</view>
									</view>
									<view class="flex-sub ">
										<view class="toptext  " style="text-align: right;">
											<view class="text-gray">{{i18n.contract.Sell_price}}</view>
											<text>{{item.sell_price}}</text>
										</view>
									</view>

								</view>

								<view class="flex margin-top-sm">

									<view class="flex-sub ">
										<view class="toptext  ">
											<view class="text-gray">{{i18n.contract.Profit}}(USDT)</view>
											<text>0(0.00%)</text> 
										</view>
									</view>

									<view class="flex-sub ">
										<view class="toptext  " style="text-align: center;">
											<view class="text-gray">{{i18n.contract.fee}}</view>
											<text>{{item.fee}}</text>
										</view>
									</view>
									<view class="flex-sub  ">
										<view class="toptext  " style="text-align: right;">

											<view class="text-gray">{{i18n.contract.Deposit}}</view>
											<text>{{item.deposit}}</text>
										</view>
									</view>

								</view>

							</view>  


							<!-- 历史 end -->
						</view>




					</template>
					<!-- 上滑加载更多组件 -->
					<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- </mix-pulldown-refresh> -->
		<lPainter :board="posterObj" ref="painter" style="position: absolute;top: 0px;z-index: -22;"></lPainter>
		<!-- 生成的图片 -->
		<uni-popup type="center" ref="posterImg" :maskClick="false">
			<view class="poster-img">
				<text @click="closePopup"></text>
				<image :src="path" mode="" @click="previewImg"></image>
				<!-- #ifdef H5 -->
				<view class="">
					长按图片保存到手机
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="">
					点击图片保存到手机
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	// import json from '@/json'
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import lPainter from '@/components/lime-painter/index.vue'

	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			// mixPulldownRefresh,
			mixLoadMore,
			uniPopup,
			lPainter
		},
		props: {
			ptype1: {
				type: String,
				default: () => {
					return ''
				}
			},
			ptype2: {
				type: String,
				default: () => {
					return ''
				}
			},
			buyname: {
				type: String,
				default: () => {
					return ''
				}
			},
			salename: {
				type: String,
				default: () => {
					return ''
				}
			},
		},
		data() {
			return {
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引 
				timestamp: 0,
				modalName: null,
				type: 1,
				order: [],
				stopfrom: {
					price: 0, //价格
					sell_hand2: 0, //数量 
					stop_profit_price: '', // 止盈
					stop_loss_price: '', // 止损  
					method: '1',
					id: '',
				},
				zytype: 1, //1 止盈 2 止损
				isrequest: false,

				show_poster: false, //显示海报
				path: '', //生成的图片地址 
				views: [],
				background: '#fff',
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			i18n() {
				return this.$t('message');
			},
			tabname() {
				return [this.i18n.contract.Order_state1, this.i18n.contract.Order_state4, this.i18n.contract.Order_state5, this.i18n
					.contract.Order_state2
				];
			},
			posterObj() {
				return {
					width: '670rpx',
					height: '928rpx',
					background: this.background,
					borderRadius: '16rpx',
					views: this.views,
				}
			},
			qrcode() {
				return this.$host + 'index.html#/pages/public/registe?tgno=' + this.userinfo.tgno
			},
			logo() {
				return this.myconfig.logo
			},
			src1() {
				return this.myconfig.sharepics[0]
			},
			src2() {
				return this.myconfig.sharepics2[0]
			},
			sharetitle() {
				return this.myconfig.sharetitle
			},
			sharesub() {
				return this.myconfig.sharesub
			},
			sharesub2() {
				return this.myconfig.sharesub2
			},
			bottom() {
				return this.myconfig.bottom
			}
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadTabbars();
		},
		// updated() {
		// 	console.log('updated')
		// },
		destroyed() {
			console.log('destroyed')
			clearInterval(this.Timer);
		},
		methods: {
			...mapActions(['getUserinfo']),
			Timer() {},
			setTimer() {
				this.Timer = setInterval(() => {
					// var timestamp = Date.parse(new Date());
					// console.log(this.tabBars[0].newsList.length)
					if (this.tabCurrentIndex != 3) {
						this.loadNewsList('refresh');
					}
				}, 3000)
			},
			//获取分类
			loadTabbars() {

				let tabList = [{
						name: this.tabname[0],
						id: '1',
						uri: 'Contractsim.weituo',
						order_state: '1',
					},
					{
						name: this.tabname[1],
						id: '2',
						uri: 'Contractsim.weituo',
						order_state: '4',
					},
					{
						name: this.tabname[2],
						id: '4',
						uri: 'Contractsim.weituo',
						order_state: '5',
					},
					{
						name: this.tabname[3],
						id: '5',
						uri: 'Contractsim.weituo',
						order_state: '2',
					},
				];
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.page = 1;
				})
				this.tabBars = tabList;
				this.loadNewsList('add');
				this.setTimer();
			},
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//列表
			loadNewsList(type) {
				let tabItem = this.tabBars[this.tabCurrentIndex];

				console.log(type)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif
				if (type === 'refresh') {
					tabItem.page = 1;
				}

				// 请求数据
				let send = {
					// ptype1: this.ptype1,
					// ptype2: this.ptype2,
					page: tabItem.page,
					order_state: tabItem.order_state
				};
				this.$http.post(tabItem.uri, send).then(res => {
					this.tabBars[0].name = this.tabname[0] + '[' + res.data.sum[1] + ']';
					this.tabBars[1].name = this.tabname[1] + '[' + res.data.sum[4] + ']';
					this.tabBars[2].name = this.tabname[2] + '[' + res.data.sum[5] + ']';
					this.tabBars[3].name = this.tabname[3] + '[' + res.data.sum[2] * 2 + ']';
					// this.tabBars[this.tabCurrentIndex].name = this.tabname[this.tabCurrentIndex] + '[' + res.data.list.total + ']';
					this.timestamp = res.time;
					let list = res.data.list;
					let wall2 = res.data.wall2;
					let fuku = 0; //浮亏
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
					list.data.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						if (item.order_state == '1') {
							let bao = this.accAdd(item.deposit, wall2)
							if (item.rise_fall == '1') {
								//买涨
								//浮动盈亏
								item.tete = ((item.newprice - item.price) *  item.bo * item.hand).toFixed(2);

							} else {
								//浮动盈亏
								item.tete = ((item.price - item.newprice) *  item.bo * item.hand).toFixed(2);

							}
							if (item.tete < 0) {
								fuku += parseFloat(item.tete)
							}
						} else {
							item.tete = 0;
						}
						item.tete2 = ((item.tete / item.deposit) * 100).toFixed(2); //浮动盈亏比率
						item.tete3 = ((item.profit / item.deposit) * 100).toFixed(2); //结算盈亏比率

						tabItem.newsList.push(item);
					})
					// console.log(fuku)
					if (this.tabCurrentIndex == 0) {
						this.$emit('ToChange', Math.abs(fuku).toFixed(2)); //更新父页面可用余额
					}

					tabItem.loadMoreStatus = list.current_page >= list.last_page ? 2 : 0;
					tabItem.page += 1;
				})

			},
			cancle(item) {
				if (this.isrequest) {
					return false;
				}
				this.isrequest = true;
				//撤单
				this.$http.post('Contractsim.cancle', {
					id: item.id
				}).then(res => {
					console.log(res)
					if (res.msg) {
						this.$api.msg(res.msg)
					}
					this.loadNewsList('refresh');
					this.getUserinfo();
					this.isrequest = false;
				})

			},
			unwind(item) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm4,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					confirmColor: '#000000',
					success: (e) => {
						if (e.confirm) {
							//平仓
							this.$http.post('Contractsim.unwind', item).then(res => {
								console.log(res)
								if (res.msg) {
									this.$api.msg(res.msg)
								}
								this.loadNewsList('refresh');
								this.getUserinfo();
							})
						}
					}
				});


			},
			hand(item, type) {
				//止盈止损	
				this.stopfrom = {
					price: 0, //价格
					sell_hand2: 0, //数量 
					stop_profit_price: '', // 止盈
					stop_loss_price: '', // 止损   
					id: '',
				};
				item.gname = item.gname.toUpperCase()
				this.order = item;
				this.zytype = type;
				this.stopfrom.sell_hand2 = item.hand;
				this.showModal('bottomModal')
			},
			cancle2(item, type) {
				console.log(type == '1')
				let send = {
					id: item.id,
					type: type
				}
				//撤单 止盈止损	
				this.$http.post('Contractsim.stopcancle', send).then(res => {
					console.log(res)
					if (res.msg) {
						this.$api.msg(res.msg)
					}
					this.loadNewsList('refresh');
					this.getUserinfo();
				})

			},
			tip() {
				this.$api.msg('开发中')
			},
			//tab切换
			async changeTab(e) {

				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;

					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					this.loadNewsList('refresh');
					// if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
					// this.loadNewsList('refresh');
					// tabItem.loaded = true;
					// }
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			showModal(value) {
				this.modalName = value
			},
			hideModal(e) {
				this.modalName = null
			},
			//加法
			accAdd(arg1, arg2) {
				var r1, r2, m, n;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				//last modify by deeka
				//动态控制精度长度
				n = (r1 >= r2) ? r1 : r2;
				var ree = ((arg1 * m + arg2 * m) / m).toFixed(n);
				return ree > 0 ? ree : 0;
			},
			//减法
			accSub(arg1, arg2) {
				return this.accAdd(arg1, -arg2);
			},
			downstop_profit_price() {
				if (this.stopfrom.stop_profit_price == '') {
					this.stopfrom.stop_profit_price = this.order.newprice;
				}
				this.stopfrom.stop_profit_price = this.accSub(this.stopfrom.stop_profit_price, 0.5);
			},
			upstop_profit_price() {
				if (this.stopfrom.stop_profit_price == '') {
					this.stopfrom.stop_profit_price = this.order.newprice;
				}
				this.stopfrom.stop_profit_price = this.accAdd(this.stopfrom.stop_profit_price, 0.5);
			},
			downstop_loss_price() {
				if (this.stopfrom.stop_loss_price == '') {
					this.stopfrom.stop_loss_price = this.order.newprice;
				}
				this.stopfrom.stop_loss_price = this.accSub(this.stopfrom.stop_loss_price, 0.5);
			},
			upstop_loss_price() {
				if (this.stopfrom.stop_loss_price == '') {
					this.stopfrom.stop_loss_price = this.order.newprice;
				}
				this.stopfrom.stop_loss_price = this.accAdd(this.stopfrom.stop_loss_price, 0.5);
			},
			downstopnum() {
				this.stopfrom.sell_hand2 = this.accSub(this.stopfrom.sell_hand2, 1);
			},
			upstopnum() {
				this.stopfrom.sell_hand2 = this.accAdd(this.stopfrom.sell_hand2, 1);
			},
			stopsend(item) {
				if (this.stopfrom.sell_hand2 > this.order.hand) {
					this.$api.msg('最多可设置数量' + this.order.hand + '张')
					return false
				}
				//止盈 
				this.stopfrom.id = item.id;
				this.$http.post('Contractsim.stopfrom', this.stopfrom).then(res => {
					console.log(res)
					if (res.msg) {
						this.$api.msg(res.msg)
					}
					this.loadNewsList('refresh');
					this.hideModal()
					this.getUserinfo();
				})
			},
			previewImg() {
				 
				uni.previewImage({
					current: this.path,
					urls: [this.path]
				});
			},
			closePopup() {
				this.$refs.posterImg.close();
				this.show_poster = false;
			},
			toSave() {

				const painter = this.$refs.painter;
				painter.canvasToTempFilePath().then(res => {
					this.path = res.tempFilePath;
					this.$refs.posterImg.open();
					this.show_poster = true;
					uni.hideLoading()
				});
			},
			sharepic(item,rate) {
				console.log(item)
				console.log(this.myconfig.sharepics2)
				uni.showLoading({
					title: '海报生成中',
				})
				this.views = [
					{
						type: 'image',
						// src: 'https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png',
						src: this.myconfig.sharepics2,
						css: {
							left: '0',
							top: '0',
							width: '100%',
							height: '100%'
						}
					},  
					{
						type: 'image',
						src: this.src1,
						css: {
							left: '50%',
							top: '80rpx',
							transform: 'translate(-50%,0)',
							width: '540rpx',
							height: '303rpx',
							borderRadius: '16rpx',
							border: '3rpx solid rgba(255,255,255,0.5)'
						}
					},
					{
						type: 'text',
						text: '学会放弃，是心态最好的时候',
						css: {
							fontSize: '32rpx',
							color: '#1D1D25',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '71rpx',
							top: '408rpx',
							width: '530rpx'
						}
					},
					{
						type: 'text',
						text: '收益率',
						css: {
							left: '43%',
							top: '465rpx',
							width: '540rpx',
							fontSize: '32rpx',
							color: '#7b7b9d',
							fontWeight: 'bold',
							lineHeight: '45rpx',

						}
					},
					{
						type: 'text',
						text: rate + '%',
						css: {
							left: '40%',
							top: '510rpx',
							width: '540rpx',
							fontSize: '42rpx',
							color: rate > 0 ? '#31ac80' : '#fa436a',
							fontWeight: 'bold',
							lineHeight: '45rpx',

						}
					},
					{
						type: 'text',
						text: item.gname.toUpperCase() + '-USDT',
						css: {
							fontSize: '28rpx',
							color: '#464646',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '71rpx',
							top: '580rpx',
							width: '530rpx'
						}
					},
					{
						type: 'text',
						text: item.rise_fall == '1' ? '永续做多' : '永续做空',
						css: {
							fontSize: '28rpx',
							color: '#464646',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '71rpx',
							top: '620rpx',
							width: '530rpx'
						}
					},
					{
						type: 'text',
						text: '当前价格',
						css: {
							fontSize: '28rpx',
							color: '#464646',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '45%',
							top: '580rpx',
							width: '530rpx'
						}
					},
					{
						type: 'text',
						text: item.newprice,
						css: {
							fontSize: '22rpx',
							color: '#464646',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '45%',
							top: '620rpx',
							width: '530rpx'
						}
					},
					{
						type: 'text',
						text: '开仓价格',
						css: {
							fontSize: '28rpx',
							color: '#464646',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '75%',
							top: '580rpx',
							width: '530rpx'
						}
					},
					{
						type: 'text',
						text: item.price,
						css: {
							fontSize: '22rpx',
							color: '#464646',
							fontWeight: 'bold',
							lineHeight: '45rpx',
							left: '75%',
							top: '620rpx',
							width: '530rpx'
						}
					},
					{
						type: 'image',
						src: this.logo,
						css: {
							left: '56rpx',
							top: '710rpx',

							width: '80rpx',
							height: '80rpx'
						}
					},
					{
						type: 'text',
						text: this.sharetitle,
						css: {
							fontSize: '28rpx',
							fontWeight: 'bold',
							color: '#1D1D25',
							lineHeight: '28rpx',
							left: '160rpx',
							top: '710rpx'
						}
					},
					{
						type: 'text',
						text: this.sharesub,
						css: {
							fontSize: '24rpx',
							color: '#000000',
							lineHeight: '24rpx',
							left: '160rpx',
							top: '760rpx'
						}
					},
					{
						type: 'view',
						css: {
							left: '542rpx',
							top: '690rpx',
							transform: 'translate(-50%,0)',
							width: '120rpx',
							height: '120rpx',
							background: '#fff',
						}
					},
					{
						type: 'qrcode',
						text: this.qrcode,
						css: {
							left: '542rpx',
							top: '695rpx',
							transform: 'translate(-50%,0)',
							width: '110rpx',
							height: '110rpx',


						}
					},
					{
						type: 'text',
						text: this.bottom,
						css: {
							left: '0',
							top: '840rpx',
							width: '100%',
							textAlign: 'center',
							fontSize: '24rpx',
							color: '#E5F0F4',
							lineHeight: '33rpx'
						}
					},
				]
				setTimeout(() => {
					this.toSave()
				}, 3000)

			}
		}
	}
</script>

<style lang='scss'>
	.cu-item .text-gray {
		width: 45px;
		display: inline-block;
	}

	.row {
		display: inline;
	}

	.bai {
		padding: 6px 12px;
		border-radius: 8px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid.no-border {
		padding: 3px 17px;
	}

	.nav .cu-item {
		border: none;
		    height: 45px;
		    display: inline-block;
		    line-height: 45px;
		    margin: 0 5px;
		    font-weight: 500;
			padding: 0;
	}



	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	.toptext {
		font-size: 12px;
		/* text-align: center; */
		/* color: black; */
		font-weight: 400;
	}

	.flex-sub button {
		width: -webkit-fill-available;
	}

	.cu-dialog {
		background: $page-color-light;
	}

	.cu-modal .flex-sub {
		border: solid 1px rgba(128, 128, 128, 0.16);
	}

	.cu-modal .flex-treble {
		border-top: solid 1px rgba(128, 128, 128, 0.16);
		border-bottom: solid 1px rgba(128, 128, 128, 0.16);
	}

	.padding {
		padding: 5px;
	}

	.poster-img {
		width: 670rpx;
		height: 928rpx;
		position: relative;

		text {
			background: url('https://s.yun-live.com/images/20210201/5c4ef9d86bc5eec90f2f915683d9db08.png') no-repeat;
			background-size: 100% 100%;
			display: inline-block;
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -60rpx;
			right: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		view {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
			margin-top: 28rpx;
		}
	}
</style>
